<template>
  <div class="flow-container">
    <p class="title">设备流量/在线数</p>
    <div id="flow-chart-div"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { deviceFlow } from '@/api/homePage'

export default {
  name: 'equipmentFlow',
  data() {
    return {
      chart: null,
      dataX: [],
      flowData: [],
      numData: []
    }
  },
  mounted() {
    this.doQuery()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    doQuery() {
      deviceFlow().then(({ data: { data } }) => {
        data.forEach(item => {
          this.flowData.push(item.flow)
          this.numData.push(item.online)
          this.dataX.push(item.modifyTime)
        })
        this.initChart()
      })
    },

    initChart() {
      this.chart = echarts.init(document.getElementById('flow-chart-div'))
      const option = {
        grid: {
          bottom: 40,
          top: 40,
          left: 80,
          right: 80
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765'
            }
          }
        },
        legend: {
          show: false
        },
        xAxis: [
          {
            type: 'category',
            splitLine: { show: false },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.65)'
              }
            },
            data: this.dataX
          }
        ],
        yAxis: [
          {
            name: '流量（M）',
            type: 'value',

            axisLine: {
              lineStyle: {
                color: '#7AD2FF'
              }
            },
            splitLine: { show: false },
            splitArea: { show: false }
          },
          {
            name: '在线个数（个）',

            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#FFAB49'
              }
            },
            splitLine: { show: false },
            splitArea: { show: false }
          }
        ],
        series: [
          {
            name: '流量',
            type: 'line',
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 11, // 折线点的大小
            showAllSymbol: true,
            color: '#2BD8FF',
            areaStyle: {
              normal: {
                // 颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(76, 195, 255, 0.5)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(76, 195, 255, 0.2)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#1B394F',
                borderColor: '#2BD8FF',
                borderWidth: 2
              }
            },
            lineStyle: {
              width: 2,
              color: '#2BD8FF'
            },
            emphasis: {
              focus: 'series'
            },
            data: this.flowData
          },
          {
            name: '在线个数',
            type: 'line',
            smooth: false,
            showAllSymbol: true,
            symbol: 'circle', // 折线点设置为实心点
            symbolSize: 11, // 折线点的大小
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: '#1B394F',
                borderColor: '#FFAA00',
                borderWidth: 2
              }
            },
            lineStyle: {
              width: 2,
              color: '#FFAA00'
            },
            emphasis: {
              focus: 'series'
            },
            data: this.numData
          }
        ]
      }
      this.chart.setOption(option)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.flow-container {
  position: absolute;
  width: 1133px;
  height: 267px;
  top: 755px;
  left: 391px;
  background-size: 100%;
  background-image: url(../../assets/platform/nethermost.png);

  .title {
    text-align: center;
    color: #00c2ff;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    width: 300px;
    background: linear-gradient(
      135deg,
      rgba(42, 163, 255, 0.20000000298023224) 0%,
      rgba(43, 112, 156, 0.00009999999747378752) 100%
    );
    border-bottom: 2px solid;
    border-image: radial-gradient(
        circle,
        rgba(42.5000012665987, 162.608702480793, 255, 1),
        rgba(
          28.000000230968,
          109.00000110268593,
          171.00000500679016,
          0.4000000059604645
        ),
        rgba(
          43.00000123679638,
          112.000000923872,
          156.00000590085983,
          0.10000000149011612
        )
      )
      2 2;
  }
  #flow-chart-div {
    height: 217px;
    width: 100%;
    background: linear-gradient(
      180deg,
      rgba(7, 122, 254, 0.23) 0%,
      rgba(0, 94, 162, 0) 100%
    );
  }
}
</style>
